<template>
  <div class="login-container">
    <div class="header">
      <div class="back" v-on:click="back"></div>  
      <div class="title">登录</div> 
      <div class="tohome"></div> 
    </div>
    <div class="login-form">
      <div class="login-title"><div class="account">网易邮箱账号登录</div></div>
      <div class="login-info">
        <div class="content">
          <input type="text"  class="email" placeholder="用户名，如name@example" v-model="username">
          <i class="close" v-show="username.length>0" @click="clean"></i>
        </div>
        <div class="content">
          <input :type="typePwd"  class="pwd" placeholder="请输入密码" v-model="password">
          <div class="view" @click="view">
             <img class="eye" v-if="typePwd=='password'" src="../../assets/imgs/eye.svg" >
             <img class="eyez" v-else src="../../assets/imgs/eysz.svg">
          </div>
        </div>
         <span style="color:red">{{msg}}</span>

        <div class="btn-login" @click="login"><p>登 录</p></div>
      </div>
    </div>
    <div class="bottom">
      <p>试运行期间仅支持网易账号登录哦</p>
      <p>其它合作渠道账号正在紧张准备中，请耐心等待</p>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      typePwd:'password',
      username:'',
      password:'',
      msg:''
    }
  },
  methods:{
    back(){
        this.$router.go(-1);//返回上一层
    },
    view(){
      if(this.typePwd == 'password'){
        this.typePwd = 'text'
      }else{
         this.typePwd =  'password' ;
      }
    },
    clean(){
      this.username='';
    },
     login(){
        var requestData={"username":this.username,"password":this.password};
        axios.post("http://81.68.253.206:8081/api/login"
        ,requestData).then(res=>{
            if(res.data&&res.data.data&&res.data.status)
             {
                localStorage.setItem("UserToken",res.data.data);
                localStorage.setItem("UserName",this.username);
                if(this.$route.query.historypath){
                    this.$router.push(this.$route.query.historypath)
                }
                else{
                      this.$router.push("/home")
                }
             }
             else{
               this.msg=res.data.message;
             }
        })
    }
  },
   
  
}
</script>
<style lang="scss" scoped>
.login-container{
  max-width: 460px;
  background-color: white;
  margin: 0 auto;
  .header{
    width: 100%;
    display: flex;
    height: rem(90);
    padding: rem(30);
    .back{
      width: rem(50);
      height: rem(50);
      background: url(../../assets/imgs/back.svg) no-repeat 50% 50%;
      background-size: auto 100%;
    }
    .tohome{
      width: rem(50);
      height: rem(50);
      background: url(../../assets/imgs/tohome1.svg) no-repeat 50% 50%;
      background-size: auto 100%;
    }
    .title{
      flex: 1;
      font-size:rem(40) ;
      font-family: Arial;
      text-align: center;          
    }
  } 
  .login-form{
    width: 100%;
    height: rem(600);
    .login-title{
      width: 100%;
      height: rem(125);
      border-top: 1px solid #f5f5f5;
      text-align: center;
      .account{
        width: 100%;
        height: rem(50);
        margin: rem(40) 0;
        font-size: rem(30);
      }
    }
    .login-info{
      width: 100%;
      height: rem(450);
      border-top: 1px solid #f5f5f5;
      padding:0 rem(30) 0;
      .content{
        width: 100%;
        height: rem(130);
        color:#f5f5f5 ;
        display: flex;
         border-bottom: 1px solid #f5f5f5;
        input{
          flex: 1;
          height: rem(90);
          border: 0;
         font-size: rem(33);
         margin-top: rem(30);
         outline:none;
        }
        .view{
          width: rem(40);
          height: rem(40);
          margin: rem(40);
          .eye{
          width: rem(40);
          height: rem(40);
        }
        .eyez{
          width: rem(40);
          height: rem(40);
        }
        }
        .close{
          width: rem(40);
          height: rem(40);
          margin: rem(40) ;
          background: url(../../assets/imgs/close.svg) no-repeat 50% 50%;
          background-size: auto 100%;
        }
        

      }
      .btn-login{
        width: 100%;
        height: rem(130);
        p{
        width: 100%;
        height: rem(90);
        line-height: rem(90);
        margin-top: rem(40);;
        border-radius: rem(45);
        background-color: #e74e4b;
        font-size: rem(40);
        color: #fff;
        text-align: center;
        cursor: pointer;
        }
      }
    }
  }
  .bottom{
    width: 100%;
    padding: rem(20);
    text-align: center;
    color: #888;
  }
}
</style>